<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card shadow="hover" style="height: 300px; margin-bottom: 20px;">
					<div class="info">
						<div class="info-image" @click="showDialog">
							<el-avatar :size="100" :src="avatarImg" />
							<span class="info-edit">
								<i class="el-icon-lx-camerafill"></i>
							</span>
						</div>
						<div class="info-name">{{ name }}</div>
						<div class="info-desc">情不知所起 一往而深</div>
					</div>
				</el-card>
				<el-card shadow="hover">
					<el-timeline>
						<el-timeline-item v-for="(activity, index) in activities" :key="index"
							:timestamp="activity.timestamp">
							{{ activity.content }}
						</el-timeline-item>
					</el-timeline>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover" >
					<template #header>
						<div class="clearfix">
							<span>基本信息</span>
						</div>
					</template>
					<el-form label-width="90px">
						<el-form-item label="用户名："> {{ name }} </el-form-item>
						<el-form-item label="昵称：">
							<el-input type="nickName" v-model="form.nickName"></el-input>
						</el-form-item>
						<el-form-item label="性别：">
							<el-radio-group v-model="form.gender">
								<el-radio :label="'man'">男</el-radio>
								<el-radio :label="'woman'">女</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="手机号：">
							<el-input type="mobile" v-model="form.mobile"></el-input>
						</el-form-item>
						<el-form-item label="旧密码：">
							<el-input type="password" v-model="form.old"></el-input>
						</el-form-item>
						<el-form-item label="新密码：">
							<el-input type="password" v-model="form.new"></el-input>
						</el-form-item>
						<el-form-item label="个人简介：">
							<el-input v-model="form.desc"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit">保存信息</el-button>
						</el-form-item>
					</el-form>
				</el-card>
			</el-col>
		</el-row>

		<el-dialog title="裁剪图片" v-model="dialogVisible" width="600px">
			<vue-cropper ref="cropper" :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage"
				style="width: 100%; height: 400px"></vue-cropper>

			<template #footer>
				<span class="dialog-footer">
					<el-button class="crop-demo-btn" type="primary">选择图片
						<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
					</el-button>
					<el-button type="primary" @click="saveAvatar">上传并保存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="user">
import { reactive, ref } from 'vue';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
import avatar from '../../assets/img/img.jpg';

const name = localStorage.getItem('ms_username');
const form = reactive({
	nickName: '小野猫',
	gender: 'man',
	mobile:'',
	old: '',
	new: '',
	desc: '情不知所起 一往而深'
});
const onSubmit = () => {
	console.log('onSubmit', form)
};

const activities = [
	{
		content: '修改昵称',
		timestamp: '2023-12-07',
	},
	{
		content: '修改密码',
		timestamp: '2023-11-13',
	},
	{
		content: 'Success',
		timestamp: '2018-10-11',
	},
]

const avatarImg = ref(avatar);
const imgSrc = ref('');
const cropImg = ref('');
const dialogVisible = ref(false);
const cropper: any = ref();

const showDialog = () => {
	dialogVisible.value = true;
	imgSrc.value = avatarImg.value;
};

const setImage = (e: any) => {
	const file = e.target.files[0];
	if (!file.type.includes('image/')) {
		return;
	}
	const reader = new FileReader();
	reader.onload = (event: any) => {
		dialogVisible.value = true;
		imgSrc.value = event.target.result;
		cropper.value && cropper.value.replace(event.target.result);
	};
	reader.readAsDataURL(file);
};

const cropImage = () => {
	cropImg.value = cropper.value.getCroppedCanvas().toDataURL();
};

const saveAvatar = () => {
	avatarImg.value = cropImg.value;
	dialogVisible.value = false;
};
</script>

<style scoped>
.info {
	text-align: center;
	padding: 35px 0;
}

.info-image {
	position: relative;
	margin: auto;
	width: 100px;
	height: 100px;
	background: #f8f8f8;
	border: 1px solid #eee;
	border-radius: 50px;
	overflow: hidden;
}

.info-edit {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.info-edit i {
	color: #eee;
	font-size: 25px;
}

.info-image:hover .info-edit {
	opacity: 1;
}

.info-name {
	margin: 15px 0 10px;
	font-size: 24px;
	font-weight: 500;
	color: #262626;
}

.crop-demo-btn {
	position: relative;
}

.crop-input {
	position: absolute;
	width: 100px;
	height: 40px;
	left: 0;
	top: 0;
	opacity: 0;
	cursor: pointer;
}
</style>
